<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax使用</title>
  <style>
    .mainContainer {
      font-size: 20px;
     }
  </style>
</head>

<body>
<div class="mainContainer">
  <div>右键打开控制台查看ajax网络请求</div>
  <button>点击发送GET请求</button>
  <button>02点击发送带参数的GET请求</button>
  <button>03点击发送带参数的POST请求</button>
</div>

<script>

//获取button元素
const btn = document.getElementsByTagName('button')[0]
//绑定事件
btn.onclick = function () {
//1. 创建对象
 const xhr = new XMLHttpRequest()
 //2. 初始化 设置请求方法和 url
 xhr.open('GET', 'http://127.0.0.1:8000/server')
 //3. 发送
 xhr.send()
 //4. 事件绑定 处理服务端返回的结果
 // on  when 当....时候
 // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
 // change  改变
 xhr.onreadystatechange = function () {
     //判断 (服务端返回了所有的结果)
     if (xhr.readyState === 4) {
  //判断响应状态码 200  404  403 401 500
  // 2xx 成功
  if (xhr.status >= 200 && xhr.status < 300) {
  //处理结果  行 头 空行 体
  //响应
  // console.log(xhr.status);//状态码
  // console.log(xhr.statusText);//状态字符串
  // console.log(xhr.getAllResponseHeaders());//所有响应头
  // console.log(xhr.response);//响应体
  //设置 result 的文本
  console.log(`${btn.textContent}返回回来的数据：`, xhr.response)
  } else {
  console.log('接口请求失败', btn.textContent)
  }
     }
 }
 }

 // 02点击发送带参数的GET请求 
 const btn2 = document.getElementsByTagName('button')[1];
 //绑定事件
 btn2.onclick = function () {
 //1. 创建对象
 const xhr = new XMLHttpRequest()
 //2. 初始化 设置请求方法和 url
 xhr.open('GET', 'http://127.0.0.1:8000/server/getAndValue?a=100&b=200&c=300');
 //3. 发送
 xhr.send()
 //4. 事件绑定 处理服务端返回的结果
 xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
  if (xhr.status >= 200 && xhr.status < 300) {
  console.log(`${btn2.textContent}返回回来的数据：`, xhr.response)
  } else {
  console.log('接口请求失败', btn2.textContent)
  }
     }
 }
 }

 // 03点击发送带参数的post请求 
 const btn3 = document.getElementsByTagName('button')[2];
 //绑定事件
 btn3.onclick = function () {
 //1. 创建对象
 const xhr = new XMLHttpRequest()
 //2. 初始化 设置请求方法和 url
 xhr.open('POST', 'http://127.0.0.1:8000/server/postAndValue');
 //设置请求头  post请求要设置请求头，以form表单的形式传参
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 //3. 发送
 xhr.send('a=100&b=200&c=30000000000111')
 //4. 事件绑定 处理服务端返回的结果
 xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
  if (xhr.status >= 200 && xhr.status < 300) {
  console.log(`${btn3.textContent}返回回来的数据：`, xhr.response)
  } else {
  console.log('接口请求失败', btn3.textContent)
  }
     }
 }
 }
    </script>
</body>

</html>